<!DOCTYPE html>
<html lang='cn' xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8"/>
		<title>产品大类列表</title>
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
		<meta content="" name="description" />
		<meta content="" name="author" />
		<link th:href="@{/backend/css/bootstrap.min.css}" href="../../../static/backend/css/bootstrap.min.css"  rel="stylesheet" type="text/css" />
		<link th:href="@{/backend/css/bootstrap-responsive.min.css}" href="../../../static/backend/css/bootstrap-responsive.min.css"  rel="stylesheet" type="text/css" />
		<link th:href="@{/backend/css/font-awesome.min.css}" href="../../../static/backend/css/font-awesome.min.css"  rel="stylesheet" type="text/css" />
		<link th:href="@{/backend/css/style-metro.css}" href="../../../static/backend/css/style-metro.css"  rel="stylesheet" type="text/css" />
		<link th:href="@{/backend/css/style.css}" href="../../../static/backend/css/style.css"  rel="stylesheet" type="text/css" />
		<link th:href="@{/backend/css/style-responsive.css}" href="../../../static/backend/css/style-responsive.css"  rel="stylesheet" type="text/css" />
		<link th:href="@{/backend/css/default.css}" href="../../../static/backend/css/default.css"  rel="stylesheet" type="text/css" id="style_color" />
		<link th:href="@{/backend/css/uniform.default.css}" href="../../../static/backend/css/uniform.default.css"  rel="stylesheet" type="text/css" />
		<link th:href="@{/backend/css/pagination.css}" href="../../../static/backend/css/pagination.css"  rel="stylesheet" type="text/css" />
		<link rel="shortcut icon" th:href="@{/backend/images/favicon.ico}" href="../../../static/backend/images/favicon.ico"  />
	</head>

	<body>
		<div class="container-fluid">
			<div class="row-fluid">
				<h3 class="page-title"><i class="fa fa-object-group"></i> 分类管理</h3>
				<ul class="breadcrumb">
					<li>
						<a href="#"><i class="fa fa-home"></i>分类管理</a>
						<i class="fa fa-angle-right"></i>
					</li>
					<li>
						<a href="#">产品大类</a>
					</li>
				</ul>
			</div>
			<div class="row-fluid">
				<div class="portlet">
					<div class="portlet-title">
						<div class="caption">
							<i class="fa fa-reorder"></i>
							产品大类列表
						</div>
						<div class="tools">
							<button onclick="window.location.href='add';" class="btn mini"><i class="fa fa-plus"></i>添加</button>
						</div>
					</div>
					<div class="portlet-body">
						<table id="cateTable" class="table table-advance table-hover">
							<thead>
								<tr>
									<th>序号</th>
									<th>名称</th>
									<th>创建时间</th>
									<th>状态</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>

		<script th:src="@{/backend/js/jquery-1.10.1.min.js}" src="../../../static/backend/js/jquery-1.10.1.min.js"  type="text/javascript"></script>
		<script src="../../../static/frontend/layer/layer.js" th:src="@{/frontend/layer/layer.js}"></script>
		<script th:src="@{/backend/js/jquery-migrate-1.2.1.min.js}" src="../../../static/backend/js/jquery-migrate-1.2.1.min.js"  type="text/javascript"></script>
		<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
		<script th:src="@{/backend/js/jquery-ui-1.10.1.custom.min.js}" src="../../../static/backend/js/jquery-ui-1.10.1.custom.min.js"  type="text/javascript"></script>
		<script th:src="@{/backend/js/bootstrap.min.js}" src="../../../static/backend/js/bootstrap.min.js"  type="text/javascript"></script>
		<script th:src="@{/backend/js/jquery.slimscroll.min.js}" src="../../../static/backend/js/jquery.slimscroll.min.js"  type="text/javascript"></script>
		<script th:src="@{/backend/js/jquery.blockui.min.js}" src="../../../static/backend/js/jquery.blockui.min.js"  type="text/javascript"></script>
		<script th:src="@{/backend/js/jquery.cookie.min.js}" src="../../../static/backend/js/jquery.cookie.min.js"  type="text/javascript"></script>
		<script th:src="@{/backend/js/jquery.uniform.min.js}" src="../../../static/backend/js/jquery.uniform.min.js"  type="text/javascript"></script>
		<script th:src="@{/backend/js/app.js}" src="../../../static/backend/js/app.js"  type="text/javascript"></script>
		<script th:src="@{/backend/js/jquery.pagination.js}" src="../../../static/backend/js/jquery.pagination.js"  type="text/javascript"></script>
		<script>
//			<![CDATA[
			function edit(id){
				window.location.href="/fleastreet/manager/category/edit/"+id;
			}
			function del(id,btn){
				if(!confirm("是否删除id为"+id+"的类目？")){
					return;
				}
				$.ajax({
					url:"/fleastreet/manager/category/del/"+id,
					type:"delete",
					success:function(result){
						if(result.code==0){
							if(result.data==true){
								layer.msg("删除成功！");
								$(btn).parent().parent().fadeOut();
							}else{
								layer.msg("删除失败！"+result.msg);
							}
						}else{
							layer.msg("删除该item错误:"+result.msg);
						}
					}
				});
			}
			$(function(){
				loadList();
			});
			function loadList(){
				$.ajax({
					url:"list",
					type:"post",
					success:function(result){
						if(result.code==0){
							showData(result.data);
						}else{
							layer.msg("加载list出错:"+result.msg);
						}
					}
				});
			}
			function showData(data){
				if(!data||!data.length>0){
					return;
				}
				//清空表
				var tbody = $("#cateTable tbody").eq(0);
				tbody.html("");
				for(var i=0;i<data.length;i++){
					var tr = $("<tr style='display:none;'></tr>");
					tr.append($("<td></td>").text(data[i].categoryId));
					tr.append($("<td></td>").text(data[i].categoryName));
					tr.append($("<td></td>").text(data[i].createTime));
					tr.append($("<td></td>").text(data[i].state));
					tr.append($("<td></td>")
							.append($('<button style="margin-right:20px;" class="btn mini green" onclick="edit('+data[i].categoryId+')"><i class="fa fa-edit"></i> 编辑</button>'))
							.append($('<button class="btn mini red" onclick="del('+data[i].categoryId+',this)"><i class="fa fa-trash"></i> 删除</button>')));
					tbody.append(tr);
					tr.fadeIn();
				}
			}
//			]]>
		</script>
	</body>

</html>